import { Tooltip, Tag,Modal } from 'antd';
import type { Settings as ProSettings } from '@ant-design/pro-layout';
import { QuestionCircleOutlined } from '@ant-design/icons';
import React, { useEffect, useState } from 'react';
import type { ConnectProps } from 'umi';
import { connect, SelectLang } from 'umi';
import type { ConnectState } from '@/models/connect';
import Avatar from './AvatarDropdown';
import HeaderSearch from '../HeaderSearch';
import styles from './index.less';
import AuthPrd from './AuthPrd';

export type GlobalHeaderRightProps = {
  theme?: ProSettings['navTheme'] | 'realDark';
  currentTenant?:any
} & Partial<ConnectProps> &
  Partial<ProSettings>;

const ENVTagColor = {
  dev: 'orange',
  test: 'green',
  pre: '#87d068',
};

const GlobalHeaderRight: React.SFC<GlobalHeaderRightProps> = (props) => {
  const { theme, layout,currentTenant } = props;
  let className = styles.right;

  if (theme === 'dark' && layout === 'top') {
    className = `${styles.right}  ${styles.dark}`;
  }
  const [visible, setVisible] = useState<boolean>(false);
  const inValid = new Date(currentTenant.endDate)<new Date()
  return (
    <div className={className}>
      <Tooltip title="在线购买授权码">
        <a onClick={()=>setVisible(true)}><Tag color={inValid?'#cd201f':'#87d068'}>{inValid?'授权':'已授权'}</Tag></a>
      </Tooltip>
      <HeaderSearch
        className={`${styles.action} ${styles.search}`}
        placeholder="Site Search"
        defaultValue="在线文档"
        options={[
          {
            label: <a href="https://www.yuque.com/books/share/ac4c0470-4b8c-406e-9709-0045ba7703ce" target="_blank">在线文档</a>,
            value: '在线培训'
          },
          {
            label: <a href="http://cms.oplug.cn" target="_blank">编码工具</a>,
            value: '编码工具',
          },
          {
            label: <a href="http://cms.oplug.cn" target="_blank">业务报表</a>,
            value: '业务报表',
          },
        ]}
      // onSearch={value => {
      //   //console.log('input', value);
      // }}
      />
      <Tooltip title="在线帮助">
        <a
          style={{
            color: 'inherit',
          }}
          target="_blank"
          href="https://www.yuque.com/books/share/ac4c0470-4b8c-406e-9709-0045ba7703ce"
          rel="noopener noreferrer"
          className={styles.action}
        >
          <QuestionCircleOutlined />
        </a>
      </Tooltip>
      
      <Avatar />
      {REACT_APP_ENV && (
        <span>
          <Tag color={ENVTagColor[REACT_APP_ENV]}>{REACT_APP_ENV}</Tag>
        </span>
      )}
      <SelectLang className={styles.action} />
      <Modal
          title={<b>产品授权</b>}
          visible={visible}
          onOk={() => setVisible(false)}
          onCancel={() => setVisible(false)}
          footer={null}
          destroyOnClose={true}>
            <AuthPrd />            
        </Modal>
    </div>
  );
};

export default connect(({ settings,user }: ConnectState) => ({
  theme: settings.navTheme,
  layout: settings.layout,
  currentTenant: user.currentTenant,
}))(GlobalHeaderRight);
